import classNames from "classnames";
import React from "react";
import { ImageWithText } from "../../../../src/components/img";
import {
  CheckStatusEnum,
  CheckStatusEnumText,
  CheckStatusColor,
  CheckStatusEnumIcon,
} from "../../../../src/interfaces";
import "./index.scss";

/** 任务评论 */
export const TaskComment = ({
  name,
  time,
  avatar,
  words,
  className,
  confirm,
}: {
  name: string;
  avatar: string;
  className?: string;
  time: string;
  words: string;
  confirm?: boolean;
}) => {
  return (
    <div className={classNames("task-comment", className)}>
      <div className="task-comment-left">
        <ImageWithText src={avatar} />
      </div>
      <div className="task-comment-right">
        <div className="task-comment-user">
          <div className="task-comment-name">
            {name.length > 10 ? name.substring(0, 10) + "..." : name}
          </div>
          <div className="task-comment-time">{time}</div>
        </div>
        {confirm !== undefined && (
          <div className="task-comment-status">
            已给出决定：
            <span className="status-word">
              {/* <img className="status-icon" src={confirm ? "" : ""} /> */}
              <span
                className={`iconfont ${
                  confirm
                    ? CheckStatusEnumIcon.check
                    : CheckStatusEnumIcon.notCheck
                }`}
                style={{
                  color: confirm
                    ? CheckStatusColor.check
                    : CheckStatusColor.notCheck,
                }}
              ></span>
              {confirm ? "已确认" : "待修改"}
            </span>
          </div>
        )}
        <div
          className="task-comment-comment"
          // eslint-disable-next-line react/no-danger
          dangerouslySetInnerHTML={{ __html: words }}
        ></div>
      </div>
    </div>
  );
};
